<template>
	<div class="template-edit">
		<n-breadcrumb class="mb-20px">
			<n-breadcrumb-item>
				<router-link to="/market/template">{{ $t('market.template.title') }}</router-link>
			</n-breadcrumb-item>
			<n-breadcrumb-item>{{ form.temp_name }}</n-breadcrumb-item>
		</n-breadcrumb>
		<bt-form class="template-form" label-placement="top">
			<n-form-item :label="$t('market.template.name')">
				<div class="w-400px">
					<n-input v-model:value="form.temp_name"></n-input>
				</div>
			</n-form-item>
			<n-form-item
				class="editor-form-item"
				:label="$t('market.template.content')"
				:show-feedback="false">
				<!-- Editor area -->
				<div class="editor-area">
					<div class="mb-16px">
						<bt-file-upload
							mode="button"
							:is-upload="false"
							:accept="['html']"
							@change="handleFileUpload">
							{{ $t('market.template.uploadHtml') }}
						</bt-file-upload>
					</div>
					<!-- Editor -->
					<div class="flex-1 overflow-hidden">
						<bt-editor v-model:value="form.content" language="html"></bt-editor>
					</div>
				</div>
				<!-- Preview area -->
				<n-card class="preview-area" :content-style="{ display: 'flex', flexDirection: 'column' }">
					<div class="preview-title">{{ $t('common.actions.preview') }}</div>
					<div class="flex-1 overflow-hidden">
						<bt-preview :value="form.content"></bt-preview>
					</div>
				</n-card>
			</n-form-item>
		</bt-form>
		<!-- Action buttons -->
		<div class="action-buttons">
			<n-button type="primary" @click="onEdit">
				{{ $t('common.actions.save') }}
			</n-button>
			<n-button class="ml-16px" secondary @click="onGoBack">
				{{ $t('common.actions.back') }}
			</n-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { UploadFileInfo } from 'naive-ui'
import { isObject } from '@/utils'
import { getTemplateDetails } from '@/api/modules/market/template'
import type { Template } from './interface'

const route = useRoute()

const templateId = ref(`${route.params.id}`)

const form = reactive({
	id: 0,
	temp_name: '',
	content: '',
})

const handleFileUpload = (file: UploadFileInfo) => {
	const reader = new FileReader()
	reader.onload = e => {
		form.content = e.target?.result as string
	}
	if (file.file) {
		reader.readAsText(file.file)
	}
}

// Save
const onEdit = async () => {
	// await updateTemplate({
	// 	id: form.id,
	// 	temp_name: form.temp_name,
	// 	content: form.content,
	// })
}

const onGoBack = () => {
	window.history.back()
}

const getTemplateHtml = async () => {
	const res = await getTemplateDetails({ id: templateId.value })
	if (isObject<Template>(res)) {
		form.id = res.id
		form.temp_name = res.temp_name
		// form.content = res.content
	}
}

getTemplateHtml()
</script>

<style lang="scss" scoped>
.template-edit {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px;
	padding-bottom: 82px;

	// Make the form occupy the remaining space
	.template-form {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0; // Prevent overflow when flex container grows infinitely
		padding-bottom: 24px;
	}

	// Make the form-item containing the editor occupy the remaining space of the form
	.editor-form-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0; // Prevent overflow

		// Important: Need to make the content wrapper of n-form-item also stretch
		// You may need to check the browser developer tools to determine the exact class name generated by Naive UI
		// Usually it's .n-form-item-blank or .n-form-item__content
		:deep(.n-form-item-blank) {
			flex: 1;
			display: flex;
			justify-content: flex-start;
			align-items: start;
			min-height: 0;
		}

		.editor-area,
		.preview-area {
			width: 50%;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.editor-area {
			border-right: 1px solid var(--color-border-1);
			padding-right: 24px;
		}

		.preview-area {
			margin-left: 24px;
			.preview-title {
				font-size: 16px;
				font-weight: 600;
				margin-bottom: 16px;
			}
		}
	}
}

.action-buttons {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 23px 24px;
	background-color: var(--color-bg-1);
	border-top: 1px solid var(--color-border-1);
}
</style>
